<template>
  <div class="plat-wrapper">
    <div
      class="arrow arrow-left"
      ref="arrowLeft"
      @click="pageMove('left')"
    ></div>
    <div class="platform" ref="platform">
      <slot />
    </div>
    <div
      class="arrow arrow-right"
      ref="arrowLeft"
      @click="pageMove('right')"
    ></div>
  </div>
</template>

<script>
export default {
  methods: {
    pageMove(type) {
      let left = this.$refs.platform.scrollLeft;
      let move = type == 'left' ? left - 80 : left + 80;
      this.$refs.platform.scroll({
        left: move,
        behavior: 'smooth'
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
</style>
